<template>
    <view class="shareActivity" :style=" { paddingTop: paddingHeight + 'px' } ">
        <nav-bar ></nav-bar>
        <view class="container">
            <button class="img2" open-type="share" plain>
                <u--image :showLoading=" true "
                    src="http://oss.antaimedical.com/images/pro/2024/12/67613415e4b0d615350f30e5XYUip90HDrkN61b3444913d3ec843bf11146fdd63850.png"
                    width="64rpx" height="64rpx" mode="widthFix"></u--image>
            </button>
            <view class="text1">一起暴瘦</view>
            <view class="text2">自控力、自律给我自由</view>
            <view class="text3">
                我在由瑞已经坚持打卡
                <view class="dayNum">28
                    <text style="font-size: 28rpx;">天</text>
                    <view class="bg"></view>
                </view>

            </view>
            <view class="text4">
                获得礼物
                <view style="margin-left: 34rpx;">
                    <u--image :showLoading=" true "
                        src="http://oss.antaimedical.com/images/pro/2024/12/676381bde4b0d615350f30ebwUXafqYel69O5d79a0d61d4e6b969e5250c5b82fa7ef.png"
                        width="146rpx" height="146rpx" mode="widthFix" ></u--image>
                </view>
            </view>
            <view class="text5">一起享“瘦”生活吧！</view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
import {
    openPunchCardActivity
} from '@/api/index.js'
export default {
    data () {
        return {
            paddingHeight: uni.getStorageSync('navbarHeight'),
            userId: uni.getStorageSync('userId'),

        }
    },
    computed: {
        ...mapGetters({
            userInfo: 'getUserInfo'
        }),
    },
    mounted () {
    },
    methods: {
        handleOpenPunchCardActivity () {
            openPunchCardActivity({ userId: this.userInfo.userId }).then((res) => {
                uni.navigateTo({
                    url: '/pagesB/clockInDay/index'
                })
            })
        },
        goBack () {
            uni.navigateBack({
                delta: 1 // 默认值是1，表示回到上一页
            });
        },
    },
    onShareAppMessage() {
        return {
            title: '一起暴瘦',
			path: `/pagesB/clockInDay/shareActivity`,
			imageUrl: 'http://oss.antaimedical.com/images/pro/2024/12/676379c6e4b0be9d444233f9vckIbVlkd46se51ba52ae86d25ce3a08d5810c33969d.png'
        }
    },
    onShareTimeline() {
        return {
            title: '一起暴瘦',
            path: `/pagesB/clockInDay/shareActivity`,
			imageUrl:'http://oss.antaimedical.com/images/pro/2024/12/676379c6e4b0be9d444233f9vckIbVlkd46se51ba52ae86d25ce3a08d5810c33969d.png',
        }
    },
}
</script>
<style lang="scss" scoped>
.shareActivity {
    background: url('http://oss.antaimedical.com/images/pro/2024/12/676379c6e4b0be9d444233f9vckIbVlkd46se51ba52ae86d25ce3a08d5810c33969d.png') no-repeat;
    background-size: 100% 100%;
    min-height: 1624rpx;
}

.container {
    position: relative;
    padding: 48rpx;
    width: 100%;
    .img2{
        position: absolute;
        right: 32rpx;
        top: 48rpx;
        background-color: transparent;
        border: none;
        width: 64rpx;
        height: 64rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .text1 {
        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
        font-weight: bold;
        font-size: 64rpx;
        color: #000000;
        line-height: 75rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .text2 {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-top: 24rpx;
    }


    .text3 {
        display: flex;
        align-items: flex-end;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: #000000;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-top: 56rpx;

        .dayNum {
            margin-left: 22rpx;
            width: 226rpx;
            text-align: center;
            z-index: 1;
            position: relative;
            font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
            font-weight: bold;
            font-size: 64rpx;
            color: #000000;
            font-style: normal;
            text-transform: none;

            .bg {
                z-index: -1;
                position: absolute;
                left: 0;
                bottom: 0;
                width: 226rpx;
                height: 24rpx;
                background: linear-gradient(135deg, #FEA1FE 0%, #FEA96E 100%);
                border-radius: 198rpx 198rpx 198rpx 198rpx;
            }
        }
    }

    .text4 {
        display: flex;
        align-items: flex-end;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: #000000;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-top: 42rpx;
    }

    .text5 {
        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
        font-weight: bold;
        font-size: 48rpx;
        color: #000000;
        line-height: 86rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-top: 86rpx;
    }
}
</style>
